window.onload = function(){
    var startY = 0;
    var moveY = 0;
    var distanceY = 0;
    var lastY = 0;
    var overFlag = false;
    var nav = document.querySelector(".ct_nav");
    var par_Height = document.querySelector(".ct_cLeft").clientHeight; 
    var lis = nav.querySelectorAll("li");
    var istap = false;
    // 触摸开始
    nav.addEventListener("touchstart",function(e){
        startY = e.targetTouches[0].clientY;
        console.log(lastY);
    });
    // 滑动
    nav.addEventListener("touchmove",function(e){
        moveY = e.targetTouches[0].clientY;
        distanceY = startY - moveY;
        // console.log(par_Height - nav.clientHeight - distanceY);
        // 如果top + distanceY < 200px   则回调
        if (lastY + distanceY > 100) {
            this.style.top = 100 +"px";
            overFlag = true;
            this.parentElement.style.backgroundColor = "pink";
        } else if(par_Height - nav.scrollHeight  >= this.offsetTop + 100 ){
            this.style.top = par_Height-nav.scrollHeight -100  +"px";
            overFlag = true;
            this.parentElement.style.backgroundColor = "pink";            
        }else {
            if(!overFlag){
                // 上一次的位置加上这一次移动位置
                this.style.top = lastY + distanceY+"px";
            }  
        }
    });
    // 滑动结束
    nav.addEventListener("touchend",function(e){
        // console.log(nav.scrollHeight - par_Height + this.offsetTop);
        if(this.offsetTop > 0 || nav.scrollHeight - par_Height + this.offsetTop < 0){
            overFlag = true;
        }
        if (overFlag) {
            if (this.offsetTop>0) {
                // 如果超出则回调
                this.style.top = 0+"px";
                overFlag = false; 
            }else {
                this.style.top =  par_Height-nav.scrollHeight+"px";
                overFlag = false; 
            }  
            this.parentElement.style.backgroundColor = "white";
        }else {
            // 延迟执行  因为先是touchend执行 然后在是click执行
            setTimeout(function(){
                if(!istap){
                    console.log("2");
                    lastY += distanceY; 
                }else {
                    istap = false;
                    console.log("test");
                }
            }, 1);
            // 记录上一次的位置
            // lastY为累加
            // 如果不是点击 则记录最后的位置
            
        }
    });

    // fastclick的使用
    if("addEventListener" in document) {
        document.addEventListener('DOMContentLoaded',function(){
            // 参数可以是任意dom元素 如果写document.body 说明会将document的所有元素都绑定fastclick.js
            FastClick.attach(document.body);
        },false);
    }

    $(nav).on("click",function(e){
         // 是点击事件
         istap = true;
         // 修改li元素的样式  清除所有li元素的类样式
         for (var i =0,len = lis.length; i < len; i++) {
             lis[i].classList.remove("active");
         }
         // 触发的是a标签 而不是li标签
         e.target.parentNode.classList.add("active");
         // console.log(e.target.parentElement);
    });
}